<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div style="text-align: center; font-size: 25px; font-weight: bolder">
          <i class="el-icon-s-home" style="margin-right: 25px"></i>
          选课管理系统
        </div>
      </el-header>

      <!-- 主体 -->
      <el-main>
        <el-card class="login-module">
          <div slot="header" class="clearfix">
            <span style="text-align: center; font-size: 20px; font-family: 'Microsoft YaHei'">
              <p><i class="el-icon-office-building" style="margin-right: 18px"></i>登陆</p>
            </span>
          </div>

          <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户 id" prop="id">
                <el-input v-model.number="ruleForm.id" prefix-icon="el-icon-lollipop"></el-input>
              </el-form-item>
              <el-form-item label="用户密码" prop="password">
                <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password
                          prefix-icon="el-icon-ice-cream-round"></el-input>
              </el-form-item>
              <el-form-item label="用户类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                  <el-radio label="student" value="student">学生</el-radio>
                  <el-radio label="teacher" value="teacher">老师</el-radio>
                  <el-radio label="admin" value="admin">admin</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>


import axios from 'axios'

export default {
  name: 'indexView',
  data () {
    return {
      ruleForm: {
        id: null,
        password: null,
        type: null,
      },
      rules: {
        id: [
          {
            required: true,
            message: '请输入用户 id',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          // 后台获取当前学期
          axios.get('http://localhost:9000/info/getCurrentTerm').then(res => {
            sessionStorage.setItem('currentTerm', res.data)
            console.log(res.data + '当前学期')
          })

          // 后台获取是否是选课
          axios.get('http://localhost:9000/info/getForbidCourseSelection').then(res => {
            sessionStorage.setItem('getForbidCourseSelection', res.data)
            console.log(res.data + '是否是选课')
          })

          console.log(this.ruleForm)

          if (this.ruleForm.type === 'admin' || this.ruleForm.type === 'teacher') {
            let form = {
              tid: this.ruleForm.id,
              password: this.ruleForm.password
            }
            console.log(form)

            axios.post('http://localhost:9000/teacher/login', form).then(res => {
              console.log(res.data + '教师登陆')

              // 登陆成功
              if (res.data === true) {
                axios.get('http://localhost:9000/teacher/findById/' + this.ruleForm.id).then(res => {
                  console.log('登陆页正在获取用户信息' + res.data)

                  sessionStorage.setItem('token', 'true')
                  sessionStorage.setItem('type', this.ruleForm.type)
                  sessionStorage.setItem('name', res.data.tname)
                  sessionStorage.setItem('tid', res.data.tid)

                  sessionStorage.setItem('username', res.data.tname)

                  console.log('name: ' + res.data.tname + ' ' + this.ruleForm.type + ' ' + res.data.tid)

                  if (this.ruleForm.type === 'admin' && res.data.tname === 'admin') {
                    this.$message({
                      showClose: true,
                      message: '登陆成功,欢迎' + res.data.tname,
                      type: 'success'
                    })
                    this.$router.push('/admin')
                  } else if (this.ruleForm.type === 'teacher' && res.data.tname !== 'admin') {
                    this.$message({
                      showClose: true,
                      message: '登陆成功,欢迎' + res.data.tname,
                      type: 'success'
                    })
                    this.$router.push('/teacher')
                  } else {
                    this.$message({
                      showClose: true,
                      message: 'admin 登陆失败，检查登陆类型',
                      type: 'error'
                    })
                  }
                })
              } else {
                this.$message({
                  showClose: true,
                  message: '登陆失败，检查账号密码',
                  type: 'error'
                })
              }
            })
          } else if (this.ruleForm.type === 'student') {
            let form = {
              sid: this.ruleForm.id,
              password: this.ruleForm.password
            }

            // 学生登录请求
            axios.post('http://localhost:9000/student/login', form).then(res => {
              console.log(res.data + '学生登陆')

              if (res.data === true) {
                // 获取学生信息
                axios.get('http://localhost:9000/student/findById/' + this.ruleForm.id).then(res => {
                  console.log('登陆页正在获取用户信息' + res.data)

                  sessionStorage.setItem('token', 'true')
                  sessionStorage.setItem('type', this.ruleForm.type)
                  sessionStorage.setItem('name', res.data.sname)
                  sessionStorage.setItem('sid', res.data.sid)

                  this.$message({
                    showClose: true,
                    message: '登陆成功,欢迎' + res.data.sname,
                    type: 'success'
                  })
                  this.$router.push('/student')
                })
              } else {
                this.$message({
                  showClose: true,
                  message: '登陆失败，检查账号密码',
                  type: 'error'
                })
              }
            })
          } else {
            console.log('! error type')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }

}
</script>

<style scoped>
.login-module {
  /*width: 380px;*/
  /*height: 325px;*/
  margin-top: 60px;
  /*border: none;*/
  position: absolute;
  right: 500px;
  text-align: center;
  width: 30%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
</style>
